<template>
      <p :class="isMe == true  ? 'right':'left' " >{{ name }}</p>
    <div class="all" :class="isMe == true  ? 'right':'left' " >
        <el-avatar class="avatar" v-if="isMe"  :src="myAvatar"></el-avatar>
        <el-avatar class="avatar" v-else  :src="avatar"></el-avatar>
        <div >
            <img class="image" v-if="type == 1"  :src="api.url+'/getMessageImg/'+message"> 
            <span v-else class="message">
            {{ message }}
            <!-- 如何消息的type等于1的话显示图片 -->
            </span>
        </div>

    </div>
    
   
 
</template>
<script >
import { useUser } from '@/store';
import api from '@/api/service'
export default{
    mounted(){
        this.$emit("haveNewMessage");
    },
    data(){
        const myAvatar = useUser().avatar;
        return{
            myAvatar,
            api
        }
    },
    props:{
        message:{
            type:String,
            required:true
        },
        avatar:{
            type:String,
            required:true
        },
        isMe:{
            type:Boolean,
            required:true
        },
        name:{
            type:String,
            required:true
        },
        type:{
            type:Number
        }
    }
}
</script>
<style scoped>
.all{
    display: flex;
}
.right{
    flex-direction: row-reverse;
    text-align:right
}
.message{
    margin: 5px;
    margin-top:20px;
    background-color: greenyellow;
    padding: 10px;
    border-radius: 10px;
    font-weight: bold;
}
.avatar{
    justify-content: center;
}
.image{
    margin-right: 5px;
    max-height: 100px;
    max-width: 80%;
}
</style>